<template>
  <div class="carManage">
    <div class="mainPage" v-if='!isAdd'>
      <div class="search">
        <!--  <el-form :inline="true" :model="wastes" class="demo-form-inline companyAdd">
          <el-form-item label="运营单位">
            <el-input v-model="wastes.yyCompany" placeholder="运营单位"></el-input>
          </el-form-item>
          <el-form-item label="运输单位">
            <el-input v-model="wastes.ysCompany" placeholder="运输单位"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSearch">查询</el-button>
            <el-button type="default" @click="resetSeachConditions">重置</el-button>
          </el-form-item>
        </el-form> -->
        <el-button type='primary' class='addBtn' @click='addRelation'>新增</el-button>
      </div>
      <!-- 表格数据 -->
      <div class="tableData">
        <el-table :data="tableData" stripe style="width: 100%">
          <el-table-column type="index" label="序号" width="50">
          </el-table-column>
          <el-table-column label="运营单位" prop='companyName'>
          </el-table-column>
          <el-table-column prop='connectCompany.companyName' label="运输单位">
          </el-table-column>
          <el-table-column label="操作" width="200">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click='wasteUpdate(scope.row)'>修改</el-button>
              <el-button type="text" size="small" @click='wasteDelet(scope.row.id)'>删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!--<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"-->
        <!--:page-sizes="[10, 20, 30, 40]" :page-size="10" layout="total, sizes, prev, pager, next, jumper"-->
        <!--:total="total">-->
        <!--</el-pagination>-->
      </div>
    </div>
    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">
        <el-form-item label='运营单位' prop='yyCompany'>
          <!--<el-autocomplete v-model="" :fetch-suggestions="querySearchAsyncYY" placeholder="请输入内容" @select="handleSelect"></el-autocomplete>-->
          <el-select v-model="ruleForm.yyCompany" filterable placeholder="请选择">
            <el-option v-for="item in restaurants" :key="item.id" :label="item.companyName" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label='运输单位' prop='ysCompany'>
          <!--<el-autocomplete v-model="ruleForm.ysCompany" :fetch-suggestions="querySearchAsyncYS" placeholder="请输入内容" @select="handleSelect"></el-autocomplete>-->
          <el-select v-model="ruleForm.ysCompany" filterable placeholder="请选择">
            <el-option v-for="item in restaurants1" :key="item.id" :label="item.companyName" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="confirmAddRelation('ruleForm')">确 定</el-button>
  </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  inject: ['reload'],
  data() {
    return {
      ruleForm: {
        yyCompany: '',
        ysCompany: '',
        id: ''
      },
      restaurants: [],
      restaurants1: [],

      timeout: null,
      page: 1,
      limit: 10,
      dialogVisible: false,
      tableData: [],
      rules: {
        yyCompany: [{
          type: 'number',
          required: true,
          message: '请选择运营公司',
          triggle: 'change'
        }],
        ysCompany: [{
          type: 'number',
          required: true,
          message: '请选择运输公司',
          triggle: 'change'
        }],


      },
      isAdd: false,
      currentPage: 1,
      total: 0,
      wasteTypeList: [],
      industryList: [],
      isUpdate: false,
      currentLoginCompany: ''

    }
  },
  created() {
    this.initList()
  },
  mounted() {
    // 获取所有行业
    this.$common.$ajax('/sys/industry/list', {}, 'get').then(res => {
      console.log(res.data.body);
      this.industryList = res.data.body
    })
    // this.restaurants = this.loadAll();
    // this.restaurants1 = this.loadAll();
    // 获取运输公司
    this.$common.$ajax('/sys/company/select', { companyType: 3 }, 'get').then(res => {
      this.restaurants1 = res.data.body
    })

    // 获取运营单位
    this.$common.$ajax('/sys/company/select', { companyType: 4 }, 'get').then(res => {
      this.restaurants = res.data.body
    })
    this.currentLoginCompany = localStorage.companyName
  },

  methods: {

    handleSelect(item) {
      console.log(item);
    },


    addRelation() {
      this.dialogVisible = true;
    },
    getArr(val) {
      console.log(val)
    },
    initList() {
      this.$common.$ajax('/sys/companyCompany/list', {
        page: this.page,
        limit: 10000,
        // ysCompany: this.wastes.ysCompany,
        // yyCompany: this.wastes.ysCompany

      }, 'get').then(res => {
        this.tableData = res.data.body;
        // this.total = res.data.body.totalCount;
      })
    },
    getCarType() {

    },
    addCar() {
      this.isAdd = true;
      this.isUpdate = false;
      // 获取危废类型
      this.$common.$ajax('/wf/wastetype/wastetype', {}, 'get').then(res => {
        console.log(res.data.body)
        this.wasteTypeList = res.data.body
      })


    },
    onSearch() {
      console.log(this.wastes)
      this.initList()
    },
    resetSeachConditions() {
      this.wastes.wasteName = '';
      this.wastes.wasteType = '';
      this.initList()
    },

    // 删除
    wasteDelet(id) {
      this.$confirm("此操作将永久删除该选项, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
        .then(() => {
          this.$common.$ajax('/sys/companyCompany/delete', { connectId: id }, 'get').then(res => {
            if (res.data.status === 200) {
              this.$message({
                type: "success",
                message: "删除成功!"
              });
              this.reload();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });

    },
    confirmAddRelation(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          if (this.isUpdate) {
            this.$common.$ajax('/sys/companyCompany/update', {
              id: '',
              companyId: this.ruleForm.yyCompany,
              connectCompanyId: this.ruleForm.ysCompany
            }, 'post').then(res => {
              this.$message({
                type: 'success',
                message: '新增成功'
              })
              this.reload()
            })
          } else {
            this.$common.$ajax('/sys/companyCompany/save', {
              companyId: this.ruleForm.yyCompany,
              connectCompanyId: this.ruleForm.ysCompany
            }, 'post').then(res => {
              this.$message({
                type: 'success',
                message: '新增成功'
              })
              this.reload()
            })
          }
        } else {
          console.log('error')
        }
      })
    },
    wasteUpdate(row) {
      console.log(row)
      this.dialogVisible = true;
      this.isUpdate = true;

      // 赋值
      this.ruleForm.yyCompany = this.currentLoginCompany;
      this.ruleForm.ysCompany = row.companyName;
      this.ruleForm.id = row.id


    },
    cancleUpdate() {
      this.reload()
    },
    goBack() {
      this.reload()
    },
    handleSizeChange(val) {
      this.limit = val;
      this.initList()
    },
    handleCurrentChange(val) {
      this.page = val;
      this.initList()
    }
  }
}

</script>
<style lang="scss" scoped>
.carManage {
  .search {
    display: flex;
    justify-content: flex-end;

    .addBtn {
      height: 40px;
    }
  }
}

.demo-ruleForm {
  width: 50%;
  margin: 0 auto;
}

</style>
